<template>
  <div>
    <ml-row :gutter="10">
      <ml-col class="margin-bottom">
        <ml-breadcrumb separator="/" style="line-height: 20px;">
          <ml-breadcrumb-item :to="{ name: 'Show' }">Show</ml-breadcrumb-item>
          <ml-breadcrumb-item :to="{ name: 'ShowList' }">列表</ml-breadcrumb-item>
          <ml-button class="fr" :to="{ name: 'ShowCreate' }" intent="primary" icon="plus">新建表单</ml-button>
        </ml-breadcrumb>
      </ml-col>
      <ml-col :span="12">
      <div class="panel">
        <div class="panel-header">
          列表
          <div class="panel-action">
            <ml-input @input="getSearch" v-model="filter" style="width: 200px" placeholder="请输入"></ml-input>
            <ml-button @click="getSearch" icon="filter" intent="primary">搜索</ml-button>
          </div>
        </div>
        <div class="panel-content">
          <ml-table
            sort-icon="list"
            v-loading="loading"
            :data="shards"
            style="width: 100%"
            @selection="(data) => {this.selected = data}">
            <ml-table-column
              :prop="item.prop"
              :key="index"
              v-for="(item, index) in tableHeadArr"
              :label="item.label">
              <template slot-scope="scope">
                <span class="list__option" v-if="item.prop === 'option'">
                  <router-link title="查看" :to="'create?look=true&id='+scope.data.id" type="subtle" intent="success">
                    <ml-icon name="eye-open"></ml-icon>
                  </router-link>
                  <router-link title="编辑" :to="'create?id='+scope.data.id" type="subtle" intent="primary">
                    <ml-icon name="edit"></ml-icon>
                  </router-link>
                  <a title="删除" @click="deleteShow(scope.data.id)" href="javascript:;">
                    <ml-icon name="trash"></ml-icon>
                  </a>
                </span>
                <span v-else-if="item.prop === 'create_time'">
                  {{scope.data.create_time | moment('YYYY-MM-DD HH:mm:ss')}}
                </span>
                <span v-else>
                  {{scope.data[item.prop]}}
                </span>
              </template>
            </ml-table-column>
          </ml-table>
          <ml-row gutter="10" style="margin-top: 40px;">
            <ml-col>
              <Pagination @goPage="goPage" :page="page" :limit="limit"
                :total="total"></Pagination>
            </ml-col>
          </ml-row>
        </div>
      </div>
      </ml-col>
    </ml-row>
  </div>
</template>
<script>
import Pagination from '@/components/plugins/pagination'
export default {
  data () {
    return {
      filter: '',
      oldFilter: '',
      loading: false,
      selected: [],
      page: 1,
      limit: 10,
      total: 0,
      tableHeadArr: [
        {
          prop: 'name',
          label: '名称'
        },
        {
          prop: 'description',
          label: '描述'
        },
        {
          prop: 'overview',
          label: '概览'
        },
        {
          prop: 'option',
          label: '操作'
        }

      ],
      shards: []
    }
  },
  components: {
    Pagination
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      this.getShowList()
    },
    getSearch () {
      if (this.oldFilter === this.filter) {
        return false
      } else {
        this.page = 1
        this.getShowList()
        this.oldFilter = JSON.parse(JSON.stringify(this.filter))
      }
    },
    getShowList () {
      var sendData = {
        page: this.page,
        limit: this.limit,
        q: this.filter
      }
      this.loading = true
      this.api.getShowList(sendData).then(res => {
        if (res.result) {
          this.total = res.total
          this.shards = res.result
        } else {
          this.total = 0
          this.shards = []
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.shards = []
      })
    },
    goPage (v) {
      this.page = v.page
      this.limit = v.limit
      this.getShowList()
    },
    deleteShow (id) {
      this.$confirm({
        title: '删除',
        message: '确定要删除吗',
        keep: true,
        confirm: {
          type: 'subtle',
          text: '确定',
          dismiss: false
        },
        cancel: {
          text: '取消',
          type: 'subtle',
          dismiss: true
        }
      }).then(confirm => {
        confirm.close()
        this.api.deleteShowMes(id).then(res => {
          this.initData()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      })
    },
    pagination () {

    }
  }
}
</script>
<style lang="stylus" scoped>
@import "~@/stylesheets/vars"

</style>
